<template>
  <div class="offline">
    <div
      v-loading="loading"
      element-loading-text="正在解析离线视频中，请勿离开页面"
      class="offline-main"
    >
      <div class="offline-main-top">
        <div class="offline-title">离线视频分析</div>
        <el-upload
          action=""
          class="avatar-uploader"
          :show-file-list="false"
          :http-request="uploadImg"
          :multiple="false"
          accept="video/*"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="upload-text">
          上传您要检索的离线视频
          <br />
          <i class="el-icon-information"></i>
          <span>提示：支持mp4、avi等常见格式，上传过程中请勿离开此界面</span>
        </div>
      </div>
      <div class="offline-main-box">
        <div class="offline-main-box-data">
          <div
            v-for="(item, index) in dataList"
            :key="index"
            class="offline-main-box-data-item"
          >
            <img class="item-img"  :src="item.imgUrl" alt="" />
            <div class="item-text">
              <span>视频时间:{{ item.imgUrl.slice(item.imgUrl.indexOf('time')+4,item.imgUrl.indexOf('_')) }}s(秒)</span>
              <span>人物画像:</span>
              <div class="features"  >
                <div v-for="(featuresItem,index2) in item.features" :key="index2" class="features-item" >{{featuresItem.feature}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import testData from '../../utils/offLine.js'
export default {
  data () {
    return {
      dataList: [],
      loading: false
    }
  },
  mounted () {
    console.log('testData', testData);
  },
  methods: {
    uploadImg (params) {
      try {
        this.loading = true
        setTimeout(() => {
          this.dataList = testData
          this.loading = false
          this.$message({
            type: 'success',
            message: `解析成功`,
          })
        }, 840);
      } catch (error) {
        this.$errAlert(error)
      }
    },
  }
  // mounted () {

  //   console.log(1)
  //   process.nextTick(() => {
  //     console.log(-8)
  //   })
  //   const a = new Promise((resolve, reject) => {
  //     console.log(2)
  //     resolve(1)
  //   }).then(() => new Promise((re, rs) => {
  //     console.log(3)
  //     re()
  //   })).then(() => {
  //     console.log(4)
  //     return new Promise((re, rs) => {
  //       console.log(5)
  //       re()
  //     }).then(() => {
  //       process.nextTick(() => {
  //         console.log(6)
  //       })
  //     })
  //   })
  //   setTimeout(() => {
  //     console.log(98)
  //   }, 0)
  //   const b = new Promise((re, rs) => {
  //     re()
  //   }).then(() => {
  //     console.log(8)
  //   })
  //   console.log(9)
  //   setTimeout(() => {
  //     console.log(99)
  //   }, 0)
  // }
}
</script>

<style lang='less' scoped>
.offline {
  background: url("/assets/image/judge_bg.png") no-repeat;
  background-size: 100% 100%;
}
.offline-title {
  color: #fff;
  font-size: 24px;
  margin-bottom: 30px;
}
.offline-main {
  width: 100%;
  height: 100vh;
  padding: 20px;
  .offline-main-top {
    width: 80%;
    margin:0 auto 20px auto;
    padding: 40px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    .upload-text {
      color: #fff;
      display: inline-block;
      font-size: 16px;
      vertical-align: middle;
    }
    .avatar-uploader {
      display: inline-block;
      border-color: #fff;
      border-radius: 5px;
      border: 1px solid rgb(119, 134, 150);
      margin-right: 30px;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #fff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #c4cad1;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 102px;
      height: 102px;
      display: block;
    }
  }
  .offline-main-box {
    width: 80%;
    margin: 0 auto 20px auto;

    &-data {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      max-height: 600px;
      overflow: auto;
      font-size: 14px;
      &-item {
        width: 296px;
        height: 120px;
        margin: 12px;
        background-color: #fff;
        padding: 8px;
        border-radius: 10px;
        display: flex;
        flex-wrap: nowrap;
        .item-img {
          width: 104px;
          height: 104px;
          border-radius: 6px;
          margin-right: 16px;
        }
        .item-text {
          color: #000;
          text-align: left;
          display: flex;
          flex-direction: column;
          font-size: 14px;
          .features {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            &-item{
              background-color: #e6e6e6;
              border-radius: 9px;
              padding: 0 7px;
              font-size: 12px;
              font-weight: 400;
              line-height: 18px;
              height: 18px;
              margin: 4px 6px 4px 0;
              
            }
          }
        }
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
}
</style>
